/**
 * 淡入淡出轮播
 * @authors Your Name (you@example.org)
 * @date    2018-04-16 21:36:58
 * @version $Id$
 */
<!-- 谈入谈出轮播 -->
(function (){
	var $banner = $("#banner1"),
		$pic = $banner.find(".pic ul li"),
		$tab = $banner.find(".tab ul li"),
		$btn = $banner.find(".btn div"),
		length = $pic.length,
		time = null,
		index = 0;
	
	<!-- 初始化显示 -->
	$banner[0].onselectstart = function(){
		return false;
	}
	$pic.hide().eq(0).show();
	$tab.eq(0).addClass("on");

	<!-- tab的移入 -->
	$tab.mouseenter(function(){
		var x = $(this).index();
		if(x !== index){
			change(x);
		}
	});

	<!-- btn点击 -->
	$btn.click(function (){
		var x = index;
		if($(this).index()){
			x++;
			x %= length;
		}else{
			x--;
			x<0?length-1:x;
		}
		change(x);
	});
	
	<!-- 定时器 -->
	$banner.hover(function(){
		clearInterval(time);
	},run());
	function run(){
		time = setInterval(function(){
			var x = index;
			x++;
			x %= length;
			change(x);
		},3000);
		return run;
	}

	<!-- 变化函数 -->
	function change(i){
		$pic.eq(index).stop().fadeOut(500);
		$tab.eq(index).removeClass("on");
		index = i;
		$pic.eq(index).stop().fadeIn(500);
		$tab.eq(index).addClass("on");
	}

	<!-- console.log($tab); -->
})();
